<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Carousel",
  props: ["list"],
  watch: {
    list: {
      /**
       * 数据没变化的时候也会执行，目的是方便floor组件没有数据的变化，也能使用
       * 注意immediate是写在监听对象里面的，因为不是每个监听对象都要立刻监听
       * */ 
      immediate: true,
      handler() {
        /**
         * (1)虽然数据变化了，已经有了，但是页面并没有渲染完成，那就获取不到
         *    nextTick可以在页面渲染完成后再执行
         *
         * 最后一个问题：为什么要放到watch里面？
         * 因为有异步操作，只要数据来了，异步操作就肯定结束了，就不怕
         * 异步操作在页面渲染后面
         *
         * (2) 以后知道了一些插件经常要使用nextClick，因为都要在DOM渲染完成之后才能执行某些代码
         * */
        this.$nextTick(() => {
          // eslint-disable-next-line no-unused-vars
          var mySwiper = new Swiper(this.$refs.cur, {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },
};
</script>

<style></style>
